<template>
  <div class="xindiansecond">
    <div class="headerDiv"></div>
    <header class="aui-bar aui-bar-nav aui-barPailuan">
      <a class="aui-pull-left aui-padded-l-15" @click="goBack()">
        <img class="aui-padded-r-10" src="../img/left.png" alt="">
        可视心率
      </a>
    </header>
    <section class="sectionMagin">
      <div class="heart2">
        <img src="../img/heart.gif" alt="">
      </div>
      <div class="aui-flex-col aui-flex-item-12 aui-text-center ">
        <div class="aui-flex-item-4 heartData">
          <div class="textColor">心率</div>
          <div>{{XinL}}次</div>
        </div>
        <div class="aui-flex-item-4 heartData">
          <div  class="textColor">剩余时间</div>
          <div>{{waitTimeXinDian}}秒</div>
        </div>
        <div class="aui-flex-item-4">
          <div  class="textColor">状态</div>
          <div>{{XinLStatus}}</div>
        </div>
      </div>
      <!--<div>-->
        <!--<img src="../img/heart1.png" alt="">-->
      <!--</div>-->
      <canvas id="box" height="80px">

      </canvas>
      <div v-if="IsReDoButton" class="imgHeart"><img @click="reDo()" src="../img/audio.png"></div>
      <div v-if="IsReCheckButton==false" @click="stopX()" class="aui-text-center mySubBtn bottomBtn">中断检查</div>
      <div v-if="IsReCheckButton==true" @click="startX()" class="aui-text-center mySubBtn bottomBtn">重新检测</div>
    </section>
  </div>
</template>

<script>
  class DrawCanv {
    constructor (el) {
      this.canvas = document.getElementById(el)
      this.bodyClientWidth = document.body.clientWidth
    }
  }
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'

  export default {
    name: 'XinDianSecond',
    data () {
      return {
        IsReDoButton:false,
        IsReCheckButton:false
      }
    },
    computed: {
      ...mapState([
        'XinL', 'writeTo16','ValueChangType', 'XinD', 'XinLArray', 'XinDArray','waitTimeXinDian','XinLStatus','ReDArray','IniINXinD'
      ])
    },
    watch: {
      IniINXinD(val) {
        this.IsReDoButton = false
        this.IsReCheckButton = false
      },
      XinDArray (val) {
        if(this.XinDArray.length==0) {

        } else {
          this.Toxin()
        }
      },
      ReDArray(val){
        // console.log(this.ReDArray.length)
        // console.log('aaaaaaaaaaa')
        // console.log(this.XinDArray.length)
        if(this.ReDArray.length==0) {
          // this.IsReDoButton  = false
          // this.SETReDArray()
          // console.log(0)
        } else if( this.ReDArray.length == this.XinDArray.length) {
          this.SETReDArray()
          clearInterval(window.TimeDArrayToReDArray)
          this.IsReDoButton  = true
        } else {
          this.reToxin()
        }
      },
      waitTimeXinDian (val) {
        if(this.waitTimeXinDian == 0) {
          clearInterval(window.setWaitTimeInter)
          this.stopX()
        }
      }
    },
    components: {
      Loading
    },
    created () {

    },
    methods: {
      ...mapMutations([ 'SETTempDArray','SETReDArray','SETXinDArray','STOPXINDiNI','SETTempDArrayArray','SetXinDARRTORECODE'
      ]),
      goBack(){
        this.stopX ()
        this.SETXinDArray()
        this.SETTempDArrayArray()
        this.$router.go(-1)
      },
      Toxin () {
        var drawOj = new DrawCanv('box')
        var canvasV = drawOj.canvas
        if(canvasV  == null) {
          return
        }
        var ctx = canvasV.getContext('2d')
        ctx.beginPath()
        ctx.clearRect(0, 0, canvasV.width, canvasV.height)
        ctx.stroke()
        ctx.closePath()

        var drawOj = new DrawCanv('box')
        var canvasV = drawOj.canvas
        var ctx = canvasV.getContext('2d')

        ctx.strokeStyle = "red"
        ctx.strokeWidth = 0.5
        ctx.beginPath()
        // ctx.moveTo(0.5, 200)
        // ctx.lineTo(50, 200)
        if (this.XinDArray.length > canvasV.width) {
          ctx.clearRect(0, 0, canvasV.width, canvasV.height)
        }
        var j = 0
        for (var x = 0; x < this.XinDArray.length; x++) {
          if (this.XinDArray.length > canvasV.width) {
            j = this.XinDArray.length - canvasV.width
            ctx.lineTo(x, this.XinDArray[x+j]/2056 * canvasV.height/2)
          } else {
            ctx.lineTo(x, this.XinDArray[x]/2056 * canvasV.height/2)
          }

        }
        // ctx.lineTo(300, 200)
        // ctx.lineTo(300, 200)
        ctx.stroke()
        ctx.closePath()
      },
      reToxin () {
        var drawOj = new DrawCanv('box')
        var canvasV = drawOj.canvas

        var ctx = canvasV.getContext('2d')
        ctx.beginPath()
        ctx.clearRect(0, 0, canvasV.width, canvasV.height)
        ctx.stroke()
        ctx.closePath()
        var drawOj = new DrawCanv('box')
        var canvasV = drawOj.canvas
        if (canvasV == undefined){
          console.log('yyy')
          return
        }
        var ctx = canvasV.getContext('2d')

        ctx.strokeStyle = "red"
        ctx.strokeWidth = 0.5
        ctx.beginPath()
        if (this.ReDArray.length > canvasV.width) {
          ctx.clearRect(0, 0, canvasV.width, canvasV.height)
        }
        var j = 0
        for (var x = 0; x < this.ReDArray.length; x++) {
          if (this.ReDArray.length > canvasV.width) {
            j = this.ReDArray.length - canvasV.width
            ctx.lineTo(x, this.ReDArray[x+j]/2056 * canvasV.height/2)
          } else {
            ctx.lineTo(x, this.ReDArray[x]/2056 * canvasV.height/2)
          }

        }
        // ctx.lineTo(300, 200)
        // ctx.lineTo(300, 200)
        ctx.stroke()
        ctx.closePath()
      },
      goPath (pth) {
        this.$router.push({path:pth})
      },
      stringToBytes ( str ) {
        var ch, st, re = []
        for (var i = 0; i < str.length; i++ ) {
          ch = str.charCodeAt(i)
          st = []
          do {
            st.push( ch & 0xFF )
            ch = ch >> 8
          }
          while ( ch )
          re = re.concat( st.reverse() )
        }
        return re
      },
      reDo() {
        this.IsReDoButton = false
        var drawOj = new DrawCanv('box')
        var canvasV = drawOj.canvas
        if(canvasV  == null) {
          return
        }
        var ctx = canvasV.getContext('2d')
        ctx.beginPath()
        ctx.clearRect(0, 0, canvasV.width, canvasV.height)
        ctx.stroke()
        ctx.closePath()

        this.SETTempDArray()
        // this.SETReDArray()
        clearInterval(window.TimeDArrayToReDArray)
        window.TimeDArrayToReDArray = setInterval('DArrayToReDArray()',1)
      },
      stopX () {
        this.SetXinDARRTORECODE()

        window.setwaitTimeXinDian(1)
        clearInterval(window.setWaitTimeInter)
        this.IsReDoButton = true
        this.IsReCheckButton = true
        var reArray = this.stringToBytes('m00000-000-00\r\n')
        console.log('暂停' + reArray)
        window.writeFunction(reArray)
      },
      startX () {
        this.IsReCheckButton = false
        this.IsReDoButton = false
        clearInterval(window.TimeDArrayToReDArray)
        this.SETXinDArray()
        window.setwaitTimeXinDian(1)
        clearInterval(window.setWaitTimeInter)
        window.setWaitTimeInter = setInterval(function() {
          window.setwaitTimeXinDian(0)
        }, 1000)
        var reArray = this.stringToBytes('m00000-140-01\r\n')
        console.log('写入数据' + reArray)
        window.writeFunction(reArray)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .imgHeart{
    height: 0;
  }
  .imgHeart img{
    position: relative;
    display: block;
    width: 4rem;
    margin: auto;
    top:-4rem;
  }
  #box{
    margin-top: 10px;
    width: 100%;
    padding: 10px;
  }
  @media screen and (max-width:320px){
    /*body{font-size: 12px;}*/
    .order{padding-top:0.1rem; padding-right: 0.1rem;}
    .stepImg2 img{height:5rem}
  }
  @media screen and (min-width:321px) and (max-width:376px){
    /*body{font-size: 14px;}*/
  }
  @media screen and (min-width:377px) and (max-width:415px){
    /*body{font-size: 16px;}*/
    .order{padding-right: 0.1rem;}
  }
  body{background: #fff !important;}
  .aui-barPailuan{
    border-bottom: 3px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px!important;
    font-weight: bold!important;
  }
  /*.step1{*/
  /*width:100%;*/
  /*!*position:relative;*!*/
  /*}*/
  .heartImg1{  /*心率图片设置*/
    display: block;
    width:70%;
    margin:2rem auto;
    /*margin-top:2rem;*/
  }
  .order{
    margin-top:1rem;
    margin-left:2rem;
    width:1.5rem;
    height:1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    background: #ccc;
    text-align: center;
    color:#000;
  }
  .method{
    width:80%;
    margin:auto;
  }
  .stepImg2 img{height:10rem;margin:auto}
  .stepImg3 img{width:80%;margin:auto;padding-top:5rem}
  .yunQistep2 img{height:8rem;margin:auto}

  .niaoJian4{
    width:100%;
    height:18rem;
    position: relative;
  }
  .niaoJian4 img{display:block;width:2.5rem;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
  .niaoJian4 .public{
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25%;
    margin-left:-25%;
    z-index: 999;
  }
  .niaoJian4 .publicItem{
    width:30%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-15%;
    margin-left:-15%;
    z-index: 999;
  }
  .niaoJian4 .outer_1{top:-70%}
  .niaoJian4 .outer_2{bottom:-70%}
  .niaoJian4 .outer_3{left:-70%}
  .niaoJian4 .outer_4{right:-70%}
  .niaoJian4 .outer_5{top:-50%;right:-50%}
  .niaoJian4 .outer_6{top:-50%;left:-50%}
  .niaoJian4 .outer_7{bottom:-50%;right:-50%}
  .niaoJian4 .outer_8{bottom:-50%;left:-50%}

  /*是否怀孕样式*/
  .verify img{width:80%;margin:auto}
  .weiHuaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;right:0}
  .huaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;left:0}


  /*排卵*/
  .ovulation{position: absolute;top:50%;margin-top:-25%;left:50%;margin-left:-25%}



  .borStyle{
    width:90%;
    border:1px solid #ccc;
    margin:0 5%;
  }
  .bHint{
    width:100%;
    position: absolute;
    bottom:1rem;
  }
  .mySubBtn{
    width: 90%;
    height: 2rem!important;
    line-height: 2rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1rem!important;
    border: 1px solid #ccc;
    border-radius: 1.125rem!important;
    background: #f7f7f7!important;
  }
  .step2{
    width:100%;
  }


  /*可视心率showHeart1页面的样式*/
  .heartStep{
    padding-left:1.5rem;
  }
  .radioStyle{
    display: inline-block;
    width:1rem;
    height:1rem;
    background: #008fd9;
    color: #fff;
    border-radius: 1rem;
    text-align: center;
  }
  /*可视心率showHeart2页面的样式*/
  .heart2{/*可视心率showHeart2图片位置*/
    /*height:12rem;*/
    width:100%;
    margin-top:2rem;
  }
  .heart2 img{margin:auto}

  .audio{
    display: block;
    width:4rem;
    margin:auto;
    margin-top:-3rem;
  }
  .heartData{
    border-right:1px solid #ccc;
  }


  .textColor{
    color:#ccc;
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
</style>

